<template>
  <div>
    <div v-if="isPage"
      class="login-page login-dialog"
      :class="{'login-page-fn':isI18n}">
      <button type="button" class="el-dialog__headerbtn" @click="isVisible=false">
        <i class="el-dialog__close el-icon el-icon-close"></i>
      </button>
      <component v-if="comType"
        :is="comType"
        :isPage="isPage"/>
    </div>
    <el-dialog v-else
      :visible.sync="isVisible"
      customClass="dialog-offset login-dialog"
      top="5vh"
      :close-on-click-modal="false"
      width="350px">
      <component v-if="comType"
        :is="comType"
        :isVisible="isVisible"/>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import phoneLogin from './phone-login'
import wxLogin from './gzh-login'
import anonymousLogin from './anonymous-login.vue'
import emailLogin from './email-login'
import Register from './register'
import updatePwd from './update-pwd'
import { isPassVersion } from '@/utils/judge'
import { mapGetters } from 'vuex'
export default {
  name: 'Account',
  components: {
    phoneLogin,
    wxLogin,
    emailLogin,
    Register,
    updatePwd,
    anonymousLogin
  },
  props: {
    isPage: Boolean
  },
  data () {
    return {
      isI18n: process.env.VUE_APP_NAME === 'i18n'
    }
  },
  computed: {
    ...mapGetters(['ACDialogType', 'appInfo']),
    isVisible: {
      get () {
        return !isPassVersion('3.0.4') && !!this.comType
      },
      set (val) {
        !val && this.$store.dispatch('user/setACDialogType', '')
      }
    },
    comType () {
      switch (this.ACDialogType) {
        case 'wxLogin':
          return 'wxLogin'
        case 'register':
          return 'Register'
        case 'forgetPwd':
          return 'updatePwd'
        case 'phoneLogin':
          return 'phoneLogin'
        case 'emailLogin':
          return 'emailLogin'
        case 'anonymousLogin':
          return 'anonymousLogin'
        default:
          return ''
      }
    }
  },
  watch: {
    ACDialogType (val) {
      if (this.isPage && !val) {
        this.$xz('xz_switch_dialog', 'XZDesktopLogin', false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.skip-btn,
.back-btn {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  position: absolute;
  top: 16px;
  right: 20px;
  cursor: pointer;
  user-select: none;
  &:hover {
    color: #333;
  }
}
.back-btn {
  font-size: 12px;
  right: unset;
  top: 12px;
  left: 12px;
}
</style>
<style lang="scss">
@import "@/theme/common/var";
.login-page{
  height: 100vh;
  background: #34353B;
  padding: 50px 40px 20px;
  position: relative;
  .body-wrap{
    margin: 0 auto;
  }
  &.login-page-fn{
    padding: 0;
    .el-dialog__headerbtn{
      display: none;
    }
  }
}
.login-dialog {
  .el-dialog__header{
    padding: 15px;
  }
  .el-dialog__body{
    padding: 20px 40px;
  }
  .min-head {
    position: absolute;
    top: 14px;
    left: 16px;
  }
  .text-btn {
    &-wrap {
      display: flex;
      justify-content: flex-end;
      padding-bottom: 8px;
    }
    user-select: none;
    line-height: 1;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    +.text-btn{
      margin-left: 10px;
    }
    &:hover {
      color: $--color-text-primary;
      span {
        color: $--color-primary;
      }
    }
  }
}
</style>
